<div class="panel panel-primary">
  <div class="panel-heading">Basic</div>
  <div class="panel-body">
    {% include 'promgen/error_block.html' with warning=form.name.errors only %}
    {{ form.name.label_tag }}
    {{ form.name }}
    <br />
    {% include 'promgen/error_block.html' with warning=form.enabled.errors only %}
    {{ form.enabled.label_tag }}
    <br />
    {{ form.enabled }}
    <br />
    {% include 'promgen/error_block.html' with warning=form.duration.errors only %}
    {{ form.duration.label_tag }}
    {{ form.duration }}
    <p>
      Examples:
      <code title="30 seconds" data-copyto="#id_duration">30s</code>
      <code title="1 minute" data-copyto="#id_duration">1m</code>
      <code title="5 minutes" data-copyto="#id_duration">5m</code>
      <code title="10 minutes" data-copyto="#id_duration">10m</code>
      <code title="1 hour" data-copyto="#id_duration">1h</code>
    </p>
    <p class="help-block">Prometheus will wait a certain duration between first encountering a new expression output vector element (like an instance with a high HTTP error rate) and counting an alert as firing for this element. Elements that are active, but not firing yet, are in pending state.</p>
    <br />
    {% include 'promgen/error_block.html' with warning=form.description.errors only %}
    {{ form.description.label_tag }}
    {{ form.description }}
    <p class="help-block">This description is not used by Prometheus. It is for Developer's to add aditional context only</p>
  </div>
  <div class="panel-heading">{{ form.clause.label_tag }}</div>
  <div class="panel-body">
    <ul class="list-inline">
      <li>Prometheus:</li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/basics/">Basics</a></li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/operators/">Operators</a></li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/functions/">Functions</a></li>
      <li><a rel="noopener noreferrer" href="https://prometheus.io/docs/querying/examples/">Examples</a></li>
      <li>Promgen:</li>
      <li><a rel="noopener noreferrer" href="https://line.github.io/promgen/user/rules.html">Rules</a></li>
    </ul>

    {% if rule.parent %}

    {% if macro not in rule.parent.clause %}
    <div class="alert alert-warning" role="alert">
      <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
      <span class="sr-only">Warning:</span>
      Missing <strong>{{ macro }}</strong> macro in parent rule. Please reffer to Promgen's documentation regarding
      <a rel="noopener noreferrer" class="alert-link" href="https://line.github.io/promgen/user/rules.html">rule overrides</a>
    </div>
    {% endif %}

    {% endif %}

    <dl class="list-inline">
      <dt>Example Query</dt>
      <dd>
        <code
          data-href="{% url 'rule-test' rule.id %}"
          data-source="self"
          data-target="#ajax-clause-check"
          data-content_type="{{rule.content_type.name}}"
          data-object_id="{{rule.object_id}}"
          >
          node_load1{% templatetag openbrace %}{{rule.content_type.model}}="{{ rule.content_object.name }}", {{ macro }}} > 5
        </code>
      </dd>
{% if rule.parent %}
      <dt>
        <a href="{% url 'rule-detail' rule.parent.pk %}" />Parent Query</a>
      </dt>
      <dd>
        <code
          data-href="{% url 'rule-test' rule.id %}"
          data-source="self"
          data-target="#ajax-clause-check"
          data-content_type="{{rule.content_type.name}}"
          data-object_id="{{rule.object_id}}"
          >
          {{rule.parent.clause}}
        </code>
      </dd>
{% endif %}
    </dl>
  </div>
  <div class="panel-body">
    {% include 'promgen/error_block.html' with errors=form.clause.errors only %}
    {{ form.clause }}
  </div>
<!-- Disable pending refactoring
  <div class="panel-body">
      <select
        data-target="#id_clause"
        data-ajax="{% url 'proxy-values' '__name__' %}"
        data-append='{% templatetag openbrace %}{{rule.content_type.name}}="{{ rule.content_object.name }}"}'
        class="form-control"
        >
        <option value="">- insert metric at cursor -</option>
      </select>
  </div>
-->
  <div class="panel-body">
    <a
      class="btn btn-primary btn-sm"
      data-href="{% url 'rule-test' rule.id %}"
      data-source="#id_clause"
      data-target="#ajax-clause-check"
      data-content_type="{{rule.content_type.name}}"
      data-object_id="{{rule.object_id}}"
      >Test Query</a>
  </div>
</div>

<div id="ajax-clause-check" class="panel-body" style="display:none;"></div>
